<template>
  <div id="map" style="height: 400px;" />
</template>

<script>
import BMap from 'BMap'
export default {
  name: 'BaiduMap',
  data() {
    return {
      map: '',
      mapZoom: 14
    }
  },
  created() {
    this.$nextTick(() => {
      this.initMap()
    })
  },
  mounted() {},
  methods: {
    // 初始化
    initMap() {
      // 创建Map实例
      this.map = new BMap.Map('map')
      // 初始化地图,设置中心点坐标和地图级别
      this.map.centerAndZoom(new BMap.Point(104.072242, 30.663711), this.mapZoom)
      // 设置地图显示的城市 此项是必须设置的
      this.map.setCurrentCity('成都')
      // 启用滚轮放大缩小，默认禁用
      this.map.enableScrollWheelZoom(true)
      // 启用地图惯性拖拽，默认禁用
      this.map.enableContinuousZoom(true)
      this.map.addEventListener('click', (data) => {
        this.$emit('setPonit', data)
        this.addMarker(data.point.lng, data.point.lat)
      })
      // 创建城市选择控件
      const cityControl = new BMap.CityListControl({
        // 控件的停靠位置（可选，默认左上角）
        // eslint-disable-next-line no-undef
        anchor: BMAP_ANCHOR_TOP_LEFT,
        // 控件基于停靠位置的偏移量（可选）
        offset: new BMap.Size(10, 5)
      })
      // 将控件添加到地图上
      this.map.addControl(cityControl)
    },
    // 添加标记
    addMarker(x, y) {
      this.removeOverlay()
      // 创建点
      var ponit = new BMap.Point(x, y)
      // 创建标记
      var marker = new BMap.Marker(ponit)
      // 在地图上添加点标记
      this.map.addOverlay(marker)
    },
    // 清除标记
    removeOverlay() {
      this.map.clearOverlays()
    }
  }
}
</script>

<style lang='scss' scoped>
</style>
